<template>
  <uni-nav-bar title="预存车用尿素" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view v-if="locaInfor" class="package space-between" style="min-height:100rpx;"
    @click="navTo('solutionAccount/addSolution?id='+locaInfor.id+'&name='+locaInfor.name+'&amount_id='+locaInfor.amount_id)">
    <view>提货地：{{locaInfor.name}}</view>
    <view>溶液存量：{{locaInfor.amount}} <uni-icons type="forward" size="20"></uni-icons></view>
  </view>
  <view class="package" v-if="userInfo.amount!=0">
    <view class="space-between">
      <view style="font-weight:600">溶液存量(公斤)</view>
      <view>{{userInfo.amount}}</view>
    </view>
    <view class="space-between top"
      @click="navTo('solutionAccount/addSolution?id='+item.region_id+'&name='+item.region_name+'&amount_id='+item.id)"
      v-for="item in userInfo.physical" :key="item.id">
      <view>{{item.region_name}}</view>
      <view class="center">{{item.amount}} <uni-icons type="forward" size="20"></uni-icons></view>
    </view>
  </view>
  <!-- 获取当前经纬度 -->
  <Lotlats @position="position"></Lotlats>
</template>

<script setup lang="ts">
  import Lotlats from '@c/team/Lotlat.vue';
  import { navBack, navTo } from '@/utils/navigator';
  import { onShow } from '@dcloudio/uni-app';
  import { useUserStore } from '@/stores/user';
  import { ref } from 'vue';
  import { getDefaultAmountRechargePrice } from '@/gql/warehouse';
  import { showLoading } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  import { toPublish } from '@mqtt';
  /**
   * 预存车用尿素主页
   * @param locaInfor 获取当前经纬度地区的存量信息（若无则显示默认地区存量信息）
   * @param longitude 纬度
   * @param latitude 经度
   */
  const userInfo = useUserStore();
  const driver_id = getDriverID();
  const locaInfor = ref()
  let longitude = 0; //纬度
  let latitude = 0; //经度
  onShow(() => {
    userInfo.Physicalamounte(driver_id);
    userInfo.inventory(driver_id);
  })
  /**
   * 获取当前城市信息
   * @param {Number} lat 当前位置的纬度
   * @param {Number} lot 当前位置的经度
   */
  function position(lats : number, lots : number) {
    longitude = lots;
    latitude = lats;
    showLoading()
    const payload = {
      query: getDefaultAmountRechargePrice,
      variables: {
        longitude,
        latitude,
        driver_id
      },
    };
    toPublish(
      'ql/driver/getDefaultAmountRechargePrice',
      payload,
      (obj : any) => {
        const { getDefaultAmountRechargePrice } = obj.data;
        locaInfor.value = getDefaultAmountRechargePrice
      }
    );
  }
</script>
<style scoped lang="less">
  .top {
    margin-top: 20rpx;
  }
</style>